<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :okButtonProps="{ style: { display: 'none' } }"
  >
    <a-spin :spinning="loading">
      <div v-if="model.id">
        <!-- 基本信息 -->
        <a-card title="基本信息" size="small" style="margin-bottom: 16px">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="出库单号">
                <span>{{ model.outboundNo }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="出库总数量">
                <span>{{ model.totalQuantity }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="状态">
                <a-tag :color="getStatusColor(model.status)">
                  {{ getStatusText(model.status) }}
                </a-tag>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>

        <!-- 出库明细 -->
        <a-card title="出库明细" size="small" style="margin-bottom: 16px">
          <a-table :columns="detailColumns" :dataSource="detailList" :pagination="false" size="small" rowKey="id">
          </a-table>
        </a-card>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  name: 'FinishedGoodsOutboundDetailModal',
  data() {
    return {
      modalTitle: '出库单详情',
      visible: false,
      loading: false,
      confirmLoading: false,
      model: {},
      detailList: [],
      logList: [],
      detailColumns: [
        { title: '门窗系列', dataIndex: 'windowSeries', width: 120 },
        { title: '门窗窗号', dataIndex: 'windowNo', width: 120 },
        { title: '门窗颜色', dataIndex: 'windowColor', width: 100 },
        { title: '数量', dataIndex: 'quantity', width: 80 },
        { title: '安装位置', dataIndex: 'installationLocation', width: 120 },
        { title: '备注', dataIndex: 'remark', ellipsis: true },
      ],
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.model = { ...record }
      this.loadDetail()
    },
    close() {
      this.visible = false
      this.model = {}
      this.detailList = []
      this.logList = []
    },
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    },
    async loadDetail() {
      if (!this.model.id) return

      this.loading = true
      try {
        // 加载出库明细
        const detailRes = await this.$http.get(`/wms/finished-goods/outbound/detail/list/${this.model.id}`)
        // 确保返回的是数组，如果是对象则转换为数组
        if (detailRes.result) {
          this.detailList = Array.isArray(detailRes.result) ? detailRes.result : [detailRes.result]
        } else {
          this.detailList = []
        }
      } catch (error) {
        this.$message.error('加载详情失败：' + error.message)
      } finally {
        this.loading = false
      }
    },
    getStatusText(status) {
      const statusMap = { 0: '待审核', 1: '审核通过', 2: '审核驳回', 3: '已出库', 4: '已取消' }
      return statusMap[status] || '未知'
    },
    getStatusColor(status) {
      const colorMap = { 0: 'orange', 1: 'green', 2: 'red', 3: 'blue', 4: 'gray' }
      return colorMap[status] || 'default'
    },
    getOperationTypeText(type) {
      const typeMap = { 1: '创建', 2: '提交审核', 3: '审核通过', 4: '审核驳回', 5: '执行出库', 6: '取消出库' }
      return typeMap[type] || '未知'
    },
  },
}
</script>
